<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <style type="text/css">
    	.notice,.workbench{
    		height: 180px;
		    background: #fff;
		   /* line-height: 55px;*/
		    position: relative;
		    z-index: 999;
		    top: -70px;
		    width: 90%;
		    margin-left: 2.5%;
		    border-radius: 5px;
		    box-shadow: 2px 3px 5px #ccc;
		    padding: 0 10px;
    	}
    	.notice-title,.work-title{
    		text-align: center;
    		padding-top: 10px;
    		font-size: 1.3rem;
    		color: #333;
    		margin-bottom: 0;
    	}
    	.notice-title:before,.work-title:before{
		    content: "";
		    display: block;
		    width: 25%;
		    height: 1px;
		    border-bottom: 1px solid #ccc;
		    position: absolute;
		    z-index: 999;
		    top: 18px;
		    left: 15%;
    	}
    	.notice-title:after,.work-title:after{
		    content: "";
		    display: block;
		    width: 25%;
		    height: 1px;
		    border-bottom: 1px solid #ccc;
		    position: absolute;
		    z-index: 999;
		    top: 18px;
		    right: 15%;
    	}
    	.notice span{
    		margin-right: 5px;
    	}
    	.notice div{
    		overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		    -webkit-box-orient: vertical;
	        color: #666;
    		font-size: 1.3rem;
    		height: 50px;
    		line-height: 50px;
    		border-bottom: 1px solid #EEEEEE;
    	}
    	.process,.process1{
    		margin-top: 20px;
    	}
    	.process div{
    		display: inline-block;
    		width: 19%;
    		height: 75px;
    		text-align: center;
    		color: #fff;
		    font-size: 2.4rem;
		    line-height: 60px;
    	}
    	.process1 div{
    		display: inline-block;
    		width: 19%;
    		text-align: center;
    		color: #666;
		    font-size: 1.4rem;
    	}
    	.workbench{
    		top: 5px;
    		width: 92%;
    		margin:0 auto ;
    		height: 270px;
    	}
    	.work-title{
    		margin-bottom: 20px;
    	}
    	.detail img{
    		max-width: 45px;
    	}
    	.detail p{
    		font-size: 1.3rem;
    	}
    	.detail{
    		text-align: center;
    		display: inline-block;
    		width: 32%;
    	}
    	.foot{
    		height: 60px;
    		background: #FFFFFF;
    		width: 100%;
    		position: fixed;
    		bottom: 0;
    	}
    	.foot div{
    		display: inline-block;
    		width: 19%;
    		text-align: center;
    		margin-top: 10px;
    	}
    	.foot div img{
    		max-width: 24px;
    	}
    	.foot div p{
    		margin: 0;
    		color: #ccc;
    	}
    	.foot div i{
    		font-size:2.4rem ;
    		color: #ccc;
    	}
    	.active i{
    		color: #3ca3ff!important;
    	}
    	.active p{
    		color: #333!important;
    	}
    	
    	
    	body{
    		overflow: hidden;
    	}
    </style>
</head>
<body>
	<!--<header class="nav" style="height: 100px;">-->
		<!--<i class="iconfont icon-fanhui" style="float: left;"></i>-->
	    <!--<span>效能督查</span>
	</header>-->
	<div style="height: 100px;background: #3CA3FF;"></div>
	<div class="notice">
		<p class="notice-title">通知公告</p>
		<div><span>•</span>关于印发反馈焦点科技复合大师开发的首付款第三方的施工防守打法</div>
		<div><span>•</span>关于印发反馈焦点科技复合大师开发的首付款第三方的施工防守打法</div>
		<p style="text-align: center;color: #999;font-size: 1.3rem;">查看更多</p>
	</div>
	<div class="content" style="background: transparent;position: relative;top: -55px;">
		<div class="process" style="text-align: center;">
			<div style="background: url(img/box1.png) no-repeat;background-size: 95%;">
				<!--<span>100</span>-->
				100
			</div>
			<div style="background: url(img/box2.png) no-repeat;background-size: 95%;">56</div>
			<div style="background: url(img/box3.png) no-repeat;background-size: 95%;">35</div>
			<div style="background: url(img/box4.png) no-repeat;background-size: 95%;">34</div>
			<div style="background: url(img/box5.png) no-repeat;background-size: 95%;">75</div>
		</div>
		<div class="process1">
			<div>待办事项</div>
			<div>正常在办</div>
			<div>催办状态</div>
			<div>逾期状态</div>
			<div>办结完成</div>
		</div>
		<div class="workbench">
			<p class="work-title">我的工作台</p>
			<div class="detail">
				<img src="img/set.png"/>
				<p><a href="setup.html">立项</a></p>
			</div>
			<div class="detail">
				<img src="img/pj_03.png"/>
				<p>评价</p>
			</div>
			<div class="detail">
				<img src="img/form.png"/>
				<p>两单一表</p>
			</div>
			<div class="detail">
				<img src="img/account.png"/>
				<p>督台账查</p>
			</div>
			<div class="detail">
				<img src="img/circle.png"/>
				<p>督情总览</p>
			</div>
			<div class="detail">
				<img src="img/more.png"/>
				<p>更多功能</p>
			</div>
		</div>
	</div>
	<!--<div class="foot">
		<div id="index" class="active">
			<i class="iconfont icon-shouye"></i>
			<p>首页</p>
		</div>
		<div id="performance">
			<i class="iconfont icon-jixiao"></i>
			<p>绩效</p>
		</div>
		<div id="warn">
			<i class="iconfont icon-jinggao"></i>
			<p>警告</p>
		</div>
		<div id="rank">
			<i class="iconfont icon-paiming"></i>
			<p>排名</p>
		</div>
		<div id="myself">
			<i class="iconfont icon-wode"></i>
			<p>我的</p>
		</div>
	</div>-->
    <script src="js/common.js"></script>
    <script type="text/javascript">
    	
         window.onload=function(){
         	document.body.style.height= document.body.clientHeight+'px';
         	console.log(document.getElementById('index'));
//       	var parent=document.querySelector('.foot');
//       	console.log(parent);
//       	function change(page){
//	         	document.getElementById(page).addEventListener('click',function(){
//	         		for (var i=0;i<5;i++) {
//	         			parent.getElementsByTagName('div')[i].classList.remove('active');
//	         		}
//					this.classList.add('active');
//					/*
//					 跳转页面
//					 //....
//					 */
//			     })
//       	}
//       	change('index');
//       	change('performance');
//       	change('warn');
//       	change('rank');
//       	change('myself');
         }
    </script>
</body>
</html>